<template>
  <view class="index_wrapper">
    <view class="index_bg">
      <!-- 头像 -->
      <view class="index_user">
        <image class="index_avatar" src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%B6%88%E6%81%AF/avatar5.jpeg" mode="aspectFill"></image>
        <view>
          <view class="index_username">
            哪吒
          </view>
          <view class="index_tip">

          </view>
        </view>
      </view>

    </view>
    <view class="index_bar">
      <view class="index_bar_item" style="border-right: 2rpx solid #0000001a;">
        <view class="index_bar_item_label">
          坚持天数
        </view>
        <view class="index_bar_item_text">
          30天
        </view>
      </view>
      <view class="index_bar_item">
        <view class="index_bar_item_label">
          正确率
        </view>
        <view class="index_bar_item_text">
          72%
        </view>
      </view>
    </view>

    <view class="index_menu_item" @tap="handleChapter">
      <view class="index_menu_item_text">
        挑战关卡
      </view>
      <image class="index_menu_item_icon" src="../../static/menu_button.svg" mode="aspectFill"></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {

    }
  },

  methods: {
    handleChapter() {
      uni.navigateTo({
        url: '/pages/category/category'
      });
    }
  }
}
</script>

<style>
.index_tip {
  font-size: 24rpx;
  color: white;
  padding-left: 30rpx;
  margin-top: 8rpx;
}

.index_username {
  color: white;
  padding-left: 30rpx;
}

.index_user {
  display: flex;
  align-items: center;
  padding: 80rpx 0rpx 0rpx 30rpx;
}

.index_avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  border: 4rpx solid white;
}

.index_wrapper {
  background: #0000000d;
  min-height: 100vh;
}

.index_bg {
  background: #5e59ff;
  height: 340rpx;
  border-bottom-left-radius: 60rpx;
  border-bottom-right-radius: 60rpx;
}

.index_bar {
  background: white;
  height: 200rpx;
  margin: -100rpx 30rpx 30rpx 30rpx;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.index_bar_item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.index_bar_item_label {
  font-size: 24rpx;
  color: #00000080;
}

.index_bar_item_text {
  height: 110rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
}

.index_menu_item {
  background: white;
  padding: 40rpx;
  margin: 60rpx 30rpx 30rpx 30rpx;
  border-radius: 20rpx;
  font-size: 32rpx;
  display: flex;
  align-items: center;
}

.index_menu_item_text {
  flex: 1;
}

.index_menu_item_icon {
  width: 90rpx;
  height: 90rpx;
}
</style>
